下面这个卡片布局，可以说很常见了。这利用了Flex 套Grid (其实Grid和Flex是没有任何冲突的)

grid-template-columns: repeat(auto-fit,minmax(100px,150px))是什么？是告诉浏览器：我想要columns，但你来决定多少个column,我想columns最小是100px最大是150px 。然后就得到下面的例子啦，当你拖动的时候，浏览器会根据宽度来设置columns的数目，取决于浏览器可视宽度。

你可以直接参考

①grid-template-columns: repeat(auto-fit,minmax(100px,150px)); 和②grid-template-columns: repeat(auto-fit,minmax(100px,1fr)); div的max-width:150px; 和③grid-template-columns: repeat(auto-fill,minmax(100px,1fr)); 有什么区别？

①当你缩小布局的时候，卡片的width：一直都是150px，直到布局只剩下150px的时候,卡片的width才会跟随缩小，直到width为100px

②推荐这样设置，特别适合响应式布局，因为这样子不管你布局缩小，右边的空白始终都会被分配到(max-width:200px以下的时候) 。不过这样有个问题就是当宽度太宽的时候，item之间会留很多空白,因为这个max-width实际上是影响不到grid的。所以你要完美解决max-width对grid影响 就要像③那样设置了。

其实你喜欢吧，只要符合你自己想要的就OK总的来说,fit :item的宽度不会影响grid(这样的好处是你可以设计一个堆叠式的卡牌)。而 fill的话，item的宽度是会影响grid了

当你的item是图片的时候(因为图片是inline-block,会有行高影响，所以为了去掉多余的space)建议你设置成block。还有应该设置width:100%，为了保持图片比例。

多个item 就直接auto-fit minmax(你喜欢,1fr),因为浏览器很smart的,他会先塞满min,然后在把空白space分配给每个item

如果那些旧浏览器不支持grid怎么办？你可以用css3的 @supports 。Jan说：向后兼容并不难啊，我做得越多我就发现越简单，其实这真的不难。

当你使用order的时候，要注意下那些使用keyboard的用户们，通过tab来选择。下面的order:-1就设置了，你用用tab键来体验下

卡片收缩布局:

参考视频